<template>
  <div class="register">
    <div class="container">
      <h1>Register and Join us</h1>
      <form :model="registerUser">
        <div class="form-control" ref="email">
          <input
            type="text"
            class="email"
            :class="{ wrong: !isChecked }"
            v-model="registerUser.email"
            name="email"
            required
            @input="validate"
          />
          <label>Email</label>
          <p>请输入正确格式的邮箱</p>
        </div>
        <div class="form-control">
          <input
            type="password"
            v-model="registerUser.password"
            class="password"
            :class="{ wrong: !isChecked }"
            name="password"
            @input="validate"
            required
          />
          <label for="">Password</label>
          <p>密码的长度为8-12位字母或数字</p>
        </div>
        <div class="form-control">
          <input
            type="password"
            v-model="registerUser.checkPassword"
            class="checkPassword"
            :class="{ wrong: !isChecked }"
            @input="validate"
            required
          />
          <label for="">CheckPassword</label>
          <p>再次确认密码</p>
        </div>
        <div class="form-control">
          <p>请选择身份</p>
          <select
            name="idendity"
            required
            v-model="registerUser.identity"
            style="width: 300px; height: 30px; outline: none"
          >
            <option value="manager">manager</option>
            <option value="employee">employee</option>
          </select>
        </div>
        <div class="checkbox">
          <input type="checkbox" required v-model="agree" />
          <p>请勾选，最终解释权归作者所有</p>
        </div>
        <button
          class="btn"
          type="submit"
          @click.prevent="submitUser(registerUser)"
        >
          Login
        </button>
        <p>
          Already have an account? <router-link to="/login">Login</router-link>
        </p>
      </form>
    </div>
  </div>
</template>

<script>
import login from "../../public/js/login.js";
export default {
  name: "Register",
  data() {
    return {
      registerUser: {
        email: "",
        password: "",
        checkPassword: "",
        identity: "",
      },
      isChecked: true,
      agree: false,
    };
  },
  mounted() {
    login();
  },
  methods: {
    //校验格式
    validate() {
      let emailReg = /^\w+@[a-zA-Z0-9]{2,4}(?:.[a-zA-Z]){1,3}$/;
      let passwordReg = /^([a-zA-Z0-9]{8,12})$/;
      if (this.registerUser.email == "") {
        return (this.isChecked = true);
      } else if (!emailReg.test(this.registerUser.email)) {
        // console.log("邮箱格式不正确");
        return (this.isChecked = false);
      }
      if (this.registerUser.password == "") {
        return (this.isChecked = true);
      } else if (!passwordReg.test(this.registerUser.password)) {
        return (this.isChecked = false);
      }
      if (this.registerUser.checkPassword == "") {
        return (this.isChecked = true);
      } else if (
        this.registerUser.password != this.registerUser.checkPassword
      ) {
        return (this.isChecked = false);
      }
      return (this.isChecked = true);
    },
    submitUser(registerUser) {
      if (
        this.isChecked &&
        this.agree &&
        this.registerUser.email &&
        this.registerUser.password &&
        this.registerUser.checkPassword
      ) {
        this.$axios.post("/api/users/register", this.registerUser)
        .then(res => {
        // console.log(res);
        // if (res.status == 200) {
          // alert("注册成功!");
                    //注册成功
          this.$message({
            message:"账号注册成功!",
            type:"success"
          });
          this.$router.push("/login");
        // }
        })
        .catch(err => {
          // alert("邮箱已经被注册!");
        })
      } else {
        alert("格式不正确请重新输入");
        return false
      }
    },
  },
};
</script>

<style scoped>
@import url('../../node_modules/element-ui/lib/theme-chalk/index.css');
@import url("../../public/css/login.css");
</style>